<template>
  <div class="content">
    <button-search placeholder="要搜索的账号" @search="searchEvent">
      <!-- 左边 -->
      <template #left>
        <el-button type="primary" size="mini" @click="isShowModel = true">添加账号</el-button>
      </template>
      <!-- 高级搜索表单 -->
      <template #form>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="账号">
            <el-input style="width:160px" v-model="searchForm.username" placeholder="要搜索的账号" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="昵称">
            <el-input style="width:160px" v-model="searchForm.name" placeholder="要搜索的昵称" size="mini"></el-input>
          </el-form-item>
          <el-form-item label="角色">
            <el-select v-model="searchForm.role_id" placeholder="请选择角色" size="mini">
              <el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker size="mini" v-model="searchForm.create_time" type="daterange" 
            range-separator="至" start-placeholde="开始日期" 
            end-placeholde="结束日期" value-format="yyyy-MM-dd" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchEvent" size="mini">搜索</el-button>
            <el-button size="mini" @click="clearSearch">清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </template>
    </button-search>
    <!-- 表格 -->
    <el-table style="margin-top: 15px" :data="tableData" border>
      <el-table-column label="头像" align="center">
        <template slot-scope="scope">
          <img class="avatar" :src="scope.row.avatar"/>
        </template>
      </el-table-column>
      <el-table-column label="账号" prop="username" align="center"/>
      <el-table-column label="昵称" prop="name" align="center"/>
      <el-table-column label="角色" align="center">
        <template slot-scope="scope">
          <el-tag size="small">{{scope.row.role_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.create_time | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.update_time | dateFormat }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button type="success" size="mini" @click="resetPassword(scope.row.id)">重置密码</el-button>
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      background
      style="margin-top: 20px"
      :current-page="page.current"
      :page-sizes="page.sizes"
      :page-size="page.size"
      layout="total,sizes,prev,pager,next,jumper"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 添加/编辑 -->
    <el-dialog :title="userForm.id!=undefined?'修改账号':'创建账号'" :visible.sync="isShowModel" @close="closeModel" width="700px" :append-to-body="true">
      <el-form ref="ruleForm" :model="userForm" :rules="rules">
        <el-form-item label="登录账号" prop="username">
          <el-input v-model="userForm.username" :disabled="userForm.id!=undefined" clearable style="width:300px" placeholder="请填写登录账号"></el-input>
        </el-form-item>
        <el-form-item v-if="userForm.id==undefined" label="登录密码" prop="password">
          <el-input v-model="userForm.password" type="password" clearable style="width:300px" placeholder="请填写登录密码"></el-input>
        </el-form-item>
        <el-form-item v-if="userForm.id==undefined" label="确认密码" prop="checkPassword">
          <el-input v-model="userForm.checkPassword" type="password" clearable style="width:300px" placeholder="请填写确认密码"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="name">
          <el-input v-model="userForm.name" clearable type="text" style="width:300px" placeholder="请填写用户昵称"></el-input>
        </el-form-item>
        <el-form-item label="用户角色" prop="role_id">
          <el-select v-model="userForm.role_id" placeholder="请选择用户角色" style="width:300px">
            <el-option v-for="(item,index) in roleList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowModel = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import buttonSearch from '@/components/ButtonSearch/index.vue'
import common from '@/mixins/common'
export default {
  mixins: [common],
  components: {
    buttonSearch
  },
  data(){
    let validatePassword = (rule,value,callback) => {
      if(value===''){
        callback(new Error('请再次输入密码'))
      }else if(value !== this.userForm.password){
        callback(new Error('两次输入密码不一致'))
      }else{
        callback()
      }
    }
    return {
      urlEnum: 'USER_LIST', // 接口字典
      searchForm: {
        username: '',
        name: '',
        role_id: '',
        create_time: ''
      }, // 搜索表单
      tableData: [], // 表格数据
      roleList: [], // 角色列表
      userForm: {
        username: '',
        password: '',
        name: '',
        role_id: ''
      }, // 表单
      rules: {
        username: [{required: true,message: '请输入登录账号',trigger: 'blur'}],
        password: [{required: true,message: '请输入登录账号',trigger: 'blur'}],
        checkPassword: [{required: true,validator: validatePassword,trigger: 'blur'}],
        name: [{required: true,message: '请输入用户昵称',trigger: 'blur'}],
        role_id: [{required: true,message: '请选择角色',trigger: 'blur'}]
      }, // 表单验证
      isShowModel: false // 是否显示创建/删除弹窗
    }
  },
  created(){
    // 获取角色列表
    this.axios.post('ROLE_LIST').then(result => {
      this.roleList = result.data.list
    })
  },
  methods: {
    // 搜索
    searchEvent(e = false){
      // 简单搜索
      if(typeof e === 'string'){
        this.searchForm.username = e
      }
      // 高级搜索
      this.getList(true)
    },
    // 清空筛选条件
    clearSearch(){
      this.searchForm = {
        username: '',
        name: '',
        role_id: '',
        create_time: ''
      }
    },
    // 关闭弹窗
    closeModel(){
      this.userForm = {
        username: '',
        password: '',
        name: '',
        role_id: ''
      }
    },
    // 打开编辑弹窗
    handleEdit(item){
      this.userForm = {
        username: item.username,
        name: item.name,
        role_id: item.role_id,
        id: item.id
      }
      this.isShowModel = true
    },
    // 提交表单,创建或修改
    submitForm(){
      this.$refs.ruleForm.validate(e => {
        if(!e) return
        this.axios.post(this.userForm.id?'EDIT_USER':'CREATE_USER',this.userForm).then(() => {
          // 成功提示
          this.$message({
            type: 'success',
            message: this.userForm.id ? '修改成功' : '创建成功'
          })
          this.isShowModel = false
          this.getList()
        })
      })
    },
    // 删除账号
    handleDelete(id){
      this.$confirm('您确定要删除该账号？','提示',{
        confirmButtonText: '确定',
        canceButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.axios.post('DELETE_USER',{id}).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          this.getList()
        })
      })
    },
    // 重置密码
    resetPassword(id){
      this.$prompt('请输入新密码', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // eslint-disable-next-line no-useless-escape
        inputPattern: /^[\w_\.\-]{1,18}$/,
        inputType: 'password',
        inputErrorMessage: '密码格式不正确'
      }).then(({ value }) => {
        this.axios.post('RESET_PASSWORD',{ id, password: value }).then(() => {
          this.$message({
            type: 'success',
            message: '密码修改成功'
          })
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        })
      })
    }
  }
}
</script>

<style scoped>
.content{
  padding: 15px 10px;
}
.avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>